<template>
  <PageWrapper title="excel数据导入示例">
    <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
      <a-button class="m-3"> 导入Excel </a-button>
    </ImpExcel>
    <BasicTable
      v-for="(table, index) in tableListRef"
      :key="index"
      :title="table.title"
      :columns="table.columns"
      :dataSource="table.dataSource"
    />
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

import { ImpExcel, ExcelData } from '/@/vbenComponents/Excel'
import { BasicTable, BasicColumn } from '/@/vbenComponents/Table'
import { PageWrapper } from '/@/vbenComponents/Page'

export default defineComponent({
  components: { BasicTable, ImpExcel, PageWrapper },

  setup() {
    const tableListRef = ref<
      {
        title: string
        columns?: any[]
        dataSource?: any[]
      }[]
    >([])

    function loadDataSuccess(excelDataList: ExcelData[]) {
      tableListRef.value = []
      console.log(excelDataList)
      for (const excelData of excelDataList) {
        const {
          header,
          results,
          meta: { sheetName },
        } = excelData
        const columns: BasicColumn[] = []
        for (const title of header) {
          columns.push({ title, dataIndex: title })
        }
        tableListRef.value.push({ title: sheetName, dataSource: results, columns })
      }
    }

    return {
      loadDataSuccess,
      tableListRef,
    }
  },
})
</script>
